<template>
  <el-card class="tag-monitor-service">
    <tag-content-header refresh @toolFun="toolFun">
      <template #title>
        <span class="title-text">系统服务监控</span>
      </template>
      <template #toolsPre>
        <el-tooltip effect="dark" content="批量启动" placement="top">
          <el-button type="primary" plain circle @click="batchHandle('start')">
            <icon-svg name="iconStartCircle"></icon-svg>
          </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="批量停止" placement="top">
          <el-button type="primary" plain circle @click="batchHandle('stop')">
            <icon-svg name="iconStopCircle"></icon-svg>
          </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="批量重启" placement="top">
          <el-button type="primary" plain circle @click="batchHandle('restart')">
            <icon-svg name="iconRedo"></icon-svg>
          </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="批量下载日志" placement="top">
          <el-button type="primary" plain circle @click="batchHandle('download')">
            <icon-svg name="iconDownload"></icon-svg>
          </el-button>
        </el-tooltip>
      </template>
    </tag-content-header>

    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :pagination="false"
      selection
      rowKey="serviceId"
    >
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip
            effect="dark"
            content="启动"
            placement="top"
            :enterable="false"
            v-if="scope.row.status === 'stop'"
          >
            <icon-svg name="iconStartCircle" @click.native="handleStart(scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="停止" placement="top" :enterable="false" v-if="scope.row.status === 'run'">
            <icon-svg name="iconStopCircle" @click.native="handleStop(scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="重启" placement="top" :enterable="false">
            <icon-svg name="iconRedo" @click.native="handleRestart(scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="下载日志" placement="top" :enterable="false">
            <icon-svg name="iconDownload" @click.native="handleDownload(scope.row)"></icon-svg>
          </el-tooltip>
          <!-- <el-tooltip
            effect="dark"
            content="打开Zabbix页面"
            placement="top"
            :enterable="false"
            v-if="scope.row.serviceId === '4'"
          >
            <icon-svg name="iconLinker" @click.native="goZabbix"></icon-svg>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="预览错误日志"
            placement="top"
            :enterable="false"
            v-if="scope.row.serviceId === '11'"
          >
            <icon-svg name="iconLog" @click.native="viewLog"></icon-svg>
          </el-tooltip> -->
        </div>
      </template>
    </tag-table>
    <log-dialog ref="logDialog"></log-dialog>
  </el-card>
</template>

<script>
import logDialog from './service-log-dialog'
export default {
  components: {
    logDialog
  },
  data() {
    return {
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '服务名称',
          prop: 'serviceName'
        },
        {
          show: true,
          label: '运行状态',
          prop: 'status',
          dict: '$monitor_service_status',
          width: 120,
          dot: {
            run: '#3cb573',
            stop: '#ef6f68'
          }
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'left',
          width: 200
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysMonitor/serviceStatus'),
        method: 'get',
        params: this.$ajax.setParams(),
        timeout: 0
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'refresh':
          // 刷新动作
          this.clearBatch()
          this.getList()
          break
      }
    },
    clearBatch() {
      this.$refs['table'].clearSelect()
    },
    handleStart(row) {
      this.$confirm('确定要启动服务【' + row.serviceName + '】？')
        .then(() => {
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysMonitor/startService/' + row.serviceId),
            method: 'get',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.getList()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    handleStop(row) {
      this.$confirm('确定要停止服务【' + row.serviceName + '】？')
        .then(() => {
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysMonitor/stopService/' + row.serviceId),
            method: 'get',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.getList()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    handleRestart(row) {
      this.$confirm('确定要重启服务【' + row.serviceName + '】？')
        .then(() => {
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysMonitor/restartService/' + row.serviceId),
            method: 'get',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.getList()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    handleDownload(row) {
      this.$utils.downloadCustomFile('sys/sysMonitor/downloadServiceLog/' + row.serviceId)
    },
    batchHandle(type) {
      let list = this.$refs['table'].getSelectList()
      if (list.length === 0) {
        this.$alert('请选择需要操作的服务')
      } else {
        this.$confirm('确定要进行批量操作吗？')
          .then(() => {
            let url = ''
            switch (type) {
              case 'start':
                url = 'sys/sysMonitor/batchStartService'
                break
              case 'stop':
                url = 'sys/sysMonitor/batchStopService'
                break
              case 'restart':
                url = 'sys/sysMonitor/batchRestartService'
                break
              case 'download':
                url = 'sys/sysMonitor/batchDownloadServiceLog'
                break
            }
            if (type === 'download') {
              this.clearBatch()
              this.$utils.downloadCustomFile(url, {
                serviceIds: list.forEach(item => item.serviceId).join(',')
              })
            } else {
              this.$ajax({
                url: this.$ajax.setUrl(url),
                method: 'post',
                data: this.$ajax.setData({
                  serviceIds: list.forEach(item => item.serviceId)
                })
              }).then(({ data }) => {
                if (data && data.code === '0') {
                  this.clearBatch()
                  this.$message.success(data.data || data.msg)
                  this.getList()
                } else {
                  this.$message.error(data.data || data.msg)
                }
              })
            }
          })
          .catch(() => {})
      }
    },
    goZabbix() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysMonitor/zabbixUrl'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          window.open(window.location.protocol + '//' + window.location.hostname + ':' + data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    viewLog() {
      this.$refs.logDialog.showDialog()
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-service {
  .tag-content-header {
    padding: 0 20px;
  }
  .operation-button-box {
    padding-left: 36px;
    .icon-svg__iconStartCircle {
      color: $tag-green;
    }
    .icon-svg__iconStopCircle {
      color: $tag-red;
    }
  }
}
</style>
